<template>
    <div class="goods-evaluate-box">
        <div class="evaluate-title">
            <span class="evaluate-line"></span>
            <span class="evaluate-name">商品评价（{{commentTotal}}）</span>
            <div
                class="all-evaluate"
                @click="goAllEvaluate"
            >查看全部<img src="@/assets/images/goodsDetail/right-icon.png" /></div>
        </div>
        <div class="evaluate-list">
            <div
                class="evaluate-item"
                v-for="(item,index) of commentList"
                :key="index"
            >
                <div class="user-header">
                    <img :src="item.face" />
                </div>
                <div class="evaluate-info">
                    <div class="user-name-date">
                        <span class="user-name">{{item.nick_name}}</span>
                        <span class="evaluate-date">{{item.add_time}}</span>
                    </div>
                    <div class="evaluate-detail">{{item.content}}</div>
                    <swiper
                        :options="swiperOption"
                        ref="mySwiper"
                    >
                        <swiper-slide
                            v-for="(imgItem,imgIndex) of item.imgs"
                            :key="imgIndex"
                        >
                            <img
                                :src="imgItem.title_img"
                                @click="previewImgList(item.imgs,imgIndex)"
                            >
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
    name: 'GoodsEvaluate',
    props: ['commentList', 'commentTotal', 'goodsId', 'goodsType'],
    data() {
        return {
            swiperOption: {
                slidesPerView: 'auto',
                spaceBetween: 10
            },
            previewImg: []
        }
    },
    methods: {
        goAllEvaluate(value) {
            this.$router.push({
                path: '/goodsEvaluate',
                query: {
                    goodsId: this.goodsId,
                    goodsType: this.goodsType
                }
            })
        },
        previewImgList(imgs, index) {
            const that = this
            this.previewImg = []
            imgs.forEach(item => {
                that.previewImg.push(item.title_img)
            })
            wx.previewImage({
                current: this.previewImg[index], // 当前显示图片的http链接
                urls: this.previewImg // 需要预览的图片http链接列表
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-evaluate-box
    margin-top 0.18rem
    background #fff
    .evaluate-title
        display flex
        align-items center
        height 1.11rem
        padding 0 0.4rem
        .evaluate-line
            width 0.1rem
            height 0.4rem
            background #d7463c
        .evaluate-name
            flex 1
            font-size 0.33rem
            color #333
            padding 0 0.2rem
            line-height 1
        .all-evaluate
            font-size 0.33rem
            color #888
            img
                height 0.33rem
                margin-left 0.1rem
                vertical-align bottom
    .evaluate-list
        padding-left 0.72rem
        .evaluate-item
            display flex
            align-items top
            padding 0.38rem 0.33rem
            border-bottom 1px solid #e5e5e5
            .user-header
                width 1.11rem
                height 1.11rem
                overflow hidden
                border-radius 100%
                img
                    width 100%
                    height 100%
            .evaluate-info
                flex 1
                min-width 1px
                margin-left 0.4rem
                .user-name-date
                    display flex
                    align-items center
                    justify-content space-between
                    .user-name
                        flex 1
                        font-size 0.33rem
                        color #666
                        line-height 1.2
                        white-space nowrap
                        overflow hidden
                        text-overflow ellipsis
                    .evaluate-date
                        margin-left 0.2rem
                        font-size 0.33rem
                        color #949494
                .evaluate-detail
                    margin-top 0.22rem
                    margin-bottom 0.22rem
                    font-size 0.38rem
                    color #333
                    line-height 1.5
                .swiper-slide
                    width 1.85rem
                    height 1.85rem
                .swiper-slide img
                    width 100%
                    height 100%
        .evaluate-item:last-child
            border none
</style>


